<template>
  <page-header-wrapper :title="false">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24" v-if="params.customer_id > 0">
              <a-form-item label="">
                <a-input v-model="formData.action_name" placeholder="请输入积分行为" :allowClear="true"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="选择村庄">
                <a-select :allowClear="true" v-model="formData.village_name" placeholder="请选择村庄" default-value="0">
                  <a-select-option :value="item.village_name" v-for="(item , index) in villageList" :key="index"> {{ item.village_name }} </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6">
              <a-form-item label="">
                <a-input v-model="formData.family_no" placeholder="请输入家庭" :allowClear="true"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24" v-if="!params.customer_id > 0">
              <a-form-item label="">
                <a-input v-model="formData.fullname" placeholder="请输入志愿者名称" :allowClear="true"/>
              </a-form-item>
            </a-col>
            <!-- <a-col :md="6" :sm="24">
              <a-form-item label="">
                <a-input v-model="formData.village_name" placeholder="请输入村庄" :allowClear="true"/>
              </a-form-item>
            </a-col> -->
            <a-col :md="23" :sm="24">
              <span class="table-page-search-submitButtons" style="float: right;">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="emptyFormData">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
        <div class="table-page-search-wrapper">
          <template>
            <s-table
              ref="table"
              size="default"
              rowKey="log_id"
              :columns="columns"
              :data="loadData">
              <span slot="serial" slot-scope="text, record, index">
                {{ index + 1 }}
              </span>
              <span slot="point" slot-scope="text, record">
                <template>
                  {{ record.pay_type === 0 ? '+' : '' }}{{ record.point }}
                </template>
              </span>
              <span slot="family_no" slot-scope="text, record">
                <template>
                  {{ record.family_master_name + ' + ' + record.family_no }}
                </template>
              </span>
              <span slot="fullname" slot-scope="text, record">
                <template>
                  {{ record.fullname ? record.fullname : '系统' }}
                </template>
              </span>
              <span slot="role" slot-scope="text, record">
                <template>
                  {{ record.role === 1 ? '主管理' : record.role === 2 ? '子管理' : record.role === 3 ? '志愿者' : '系统' }}
                </template>
              </span>
              <span slot="object_type" slot-scope="text, record">
                <template>
                  {{ record.object_type === 1 ? '正常' : '驳回' }}
                </template>
              </span>
              <span slot="created_at" slot-scope="text, record">
                <template>
                  {{ record.created_at| setTime }}
                </template>
              </span>
              <span slot="action" slot-scope="text, record">
                <template>
                  <a v-action:reject v-if="record.object_type === 1" @click="onDetails(record,1)">驳回</a>
                  <a-divider v-if="record.object_type === 1" type="vertical"/>
                  <a @click="onDetails(record,0)">详情</a>
                </template>
              </span>
            </s-table>
          </template>
        </div>
      </div>
    </a-card>
    <!-- 积分详情 弹出模板 -->
    <integral-detail
      ref="createModal"
      v-if="visible"
      :detailsType="detailsType"
      :visible="visible"
      :loading="confirmLoading"
      :model="mdl"
      :formData="integralData"
      @cancel="handleCancel"
      @ok="handleOk"
      @fatherMethod="fatherMethod"
      :okHidden="okHidden"
      :serveList="serveList"
    />
  </page-header-wrapper>
</template>

<script>
  import {
    lists
  } from '@/api/bank'
  import {
    villageList
  } from '@/api/common'
  import {
    STable
  } from '@/components'
  import integralDetail from './modules/integral.detail.detail'
  let self
  export default {
    name: 'IntegralDetail',
    components: {
      STable,
      integralDetail
    },
    data () {
      return {
        // 积分详情
        integralData: undefined,
        visible: false,
        confirmLoading: false,
        okHidden: false,
        mdl: null,
        serveList: [],
        detailsType: 0,
        // 分割
        data: [],
        pagination: {},
        loading: false,
        villageList: [],
        yearPickShow: false,
        formData: {
          family_no: '',
          village_name: '',
          fullname: '',
          page: 1,
          per_page: 10
        },
        // 表头
        columns: [{
            title: '家庭',
            dataIndex: 'family_no',
            scopedSlots: { customRender: 'family_no' }
          },
          {
            title: '积分行为',
            dataIndex: 'action_name'
          },
          {
            title: '分值',
            scopedSlots: { customRender: 'point' }
          },
          {
            title: '操作者',
            dataIndex: 'fullname',
            scopedSlots: { customRender: 'fullname' }
          },
          {
            title: '身份',
            dataIndex: 'role',
            scopedSlots: { customRender: 'role' }
          },
          {
            title: '村庄',
            dataIndex: 'village_name'
          },
          {
            title: '操作时间',
            scopedSlots: { customRender: 'created_at' }
          },
          {
            title: '状态',
            dataIndex: 'object_type',
            scopedSlots: { customRender: 'object_type' }
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 列表组件 加载家风银行列表
        loadData: async parameter => {
          // this.formData['page'] = parameter.pageNo
          const params = {
            page: parameter.pageNo,
            per_page: parameter.pageSize,
            family_no: this.formData.family_no,
            village_name: this.formData.village_name,
            fullname: this.formData.fullname
          }
          // this.formData['per_page'] = parameter.pageSize
          const res = await lists(params)
          const result = {
            pageNo: res.current_page,
            totalPage: res.last_page,
            data: res.data,
            pageSize: 10,
            totalCount: res.total
          }
          return Promise.resolve(result)
        },
        // 上一页面传参
        params: {},
        options: {
          alert: {
            show: true,
            clear: () => {
              this.selectedRowKeys = []
            }
          },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange
          }
        }
      }
    },
    filters: {
      setTime (ev) {
        const date = new Date(ev)
        // 转换日期
        const y = date.getFullYear()
        let m = date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m
        let d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        let h = date.getHours()
        h = h < 10 ? ('0' + h) : h
        let M = date.getMinutes()
        M = M < 10 ? ('0' + M) : M
        let s = date.getSeconds()
        s = s < 10 ? ('0' + s) : s
        return y + '-' + m + '-' + d + ' ' + h + ':' + M + ':' + s
      }
    },
    mounted () {
      this.getVillageList()
    },
    created () {
      // 借用页面查询当前志愿者的积分操作详情
      this.params = JSON.parse(decodeURIComponent(this.$route.query['#'] || '') || '{}')
      if (this.params.customer_id > 0) {
        this.columns.splice(3, 2)
      }
      self = this
    },
    computed: {
    },
    methods: {
      getLists () {
        self.$refs.table.refresh(true)
      },
      alt () {
        // 清空年份数据
        this.formData.year = undefined
      },
      handleOpenChange (status) {
        // 监听年份日历被打开
        self.yearPickShow = status
      },
      // 得到年份选择器的值
      handlePanelChange (value) {
        this.formData.year = value
        this.yearPickShow = false
      },
      getVillageList () {
        // 获取村庄列表
        villageList().then((res) => {
          this.villageList = res.list
        })
      },
      onShowSizeChange (current, pageSize) {
        this.page.pageSize = pageSize
      },
      onDetails (ev, type) {
        // 查看详情
        this.detailsType = type
        this.integralData = ev
        this.visible = true
      },
      handleOk () {
      },
      handleCancel () {
        this.visible = false
      },
      emptyFormData () {
        self.formData = {
          family_no: '',
          village_name: '',
          fullname: '',
          page: 1,
          per_page: 10
        }
        this.$refs.table.refresh(true)
      },
      fatherMethod () {
        this.getLists()
        this.handleCancel()
      }
    }
  }
</script>
